#live2dcanvas{
    border: none !important;
    opacity: 1 !important;
}

#app-container{
    background: none;
    .bgImg-container{
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
    }
}

#layout-content{
    margin-top: 60px;
    padding: 0 50px;
    box-sizing: border-box;
    background: none;
    margin-bottom: 60px;

    .ant-card-meta-description{
        color: rgba(0,0,0,.6);
    }

    #sider-container{
        border-radius: 10px;
        overflow: hidden;
    }

    #blogContent{
        background: rgba(255,255,255,.2);
        border-radius: 10px;

        .ant-list-pagination{
            padding-left: 16px;
        }

        .ant-list-item-meta-title{
            margin-bottom: 0;
        }
    }
    .ant-layout-sider-light{
        background: rgba(255,255,255,.2);
    }
    .ant-card{
        background: none;
    }
    .ant-list-pagination{
        text-align: left;
    }
}

@media screen and(max-width: 768px){
    #layout-content{
        display: flex;
        width: 100%;
        flex-direction: column-reverse;
        padding: 0;
        margin-top: 40px;

        #blogContent{
            margin: 0;
        }

        #sider-container{
            padding-top: 20px;
            flex: 0 0 100% !important;
            max-width: 100% !important;
            min-width: 100% !important;
            width: 100% !important;
        }
    }
}
